<script lang="tsx">
import { Component, Vue, Prop } from 'vue-property-decorator'
import NavbarSide from './NavbarSide.vue'
import NavbarColumn from './NavbarColumn.vue'
import NavDivider from './NavDivider.vue'
import CollapseTransition from '@/components/CollapseTransition'

@Component({
  name: 'NavBar',
  components: {
    NavbarSide,
    NavbarColumn,
    NavDivider,
    CollapseTransition,
  },
})
export default class extends Vue {
  render() {
    const menuButton = (
      <button
        class='menu-button'
        onClick={ () => { this.isExpaned = !this.isExpaned } }
      >
        <i class='iconfont iconsort'></i>
      </button>
    )

    return (
      <div class='navbar-container'>
        <div class='navbar-full fixed'>
          <div class='navbar'>
            <navbar-side direction='left'>
              { this.brandAlign === 'left' ? this.$slots.brand : menuButton }
              <div class='navbar-side-toggle'>
                { this.$slots.left }
              </div>
            </navbar-side>
            <navbar-side direction='right'>
              <div class='navbar-side-toggle'>
                { this.$slots.right }
              </div>
              { this.brandAlign === 'right' ? this.$slots.brand : menuButton }
            </navbar-side>

            <collapse-transition>
              <div
                v-show={ this.isExpaned }
                class='navbar-collapse'>
                <navbar-column>
                  { this.$slots.left }
                  <NavDivider/>
                  { this.$slots.right }
                </navbar-column>
              </div>
            </collapse-transition>

          </div>
        </div>
      </div>
    )
  }

  private isExpaned = false

  @Prop({
    type: String,
    default: 'left',
    validator: function(value: string) {
      return ['left', 'right'].includes(value)
    },
  })
  brandAlign!: string
}
</script>
